<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tank Game</title>
<style>
    #game-container {
        position: relative;
        width: 800px;
        height: 600px;
        margin: 0 auto;
        border: 2px solid #000;
        overflow: hidden;
    }

    #tank {
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('./images/down.png');
        background-size: cover;
    }

    #scene {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url('./images/grassland.png');
        background-size: cover;
    }
</style>
</head>
<body>

<div id="game-container">
    <div id="scene"></div>
    <div id="tank"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    const tank = document.getElementById('tank');
    const gameContainer = document.getElementById('game-container');
    const tankWidth = tank.offsetWidth;
    const tankHeight = tank.offsetHeight;
    const gameWidth = gameContainer.offsetWidth;
    const gameHeight = gameContainer.offsetHeight;
    const tankSpeed = 5;

    let tankDirection = 'down';

    document.addEventListener('keydown', function(event) {
        let x = parseInt(tank.style.left) || 0;
        let y = parseInt(tank.style.top) || 0;

        switch (event.key) {
            case 'w':
            case 'ArrowUp':
                y -= tankSpeed;
                tankDirection = 'up';
                break;
            case 's':
            case 'ArrowDown':
                y += tankSpeed;
                tankDirection = 'down';
                break;
            case 'a':
            case 'ArrowLeft':
                x -= tankSpeed;
                tankDirection = 'left'; 
                break;
            case 'd':
            case 'ArrowRight':
                x += tankSpeed;
                tankDirection = 'right';
                break;
            default:
                return;
        }

        if (x < 0) {
            x = 0;
        } else if (x > gameWidth - tankWidth) {
            x = gameWidth - tankWidth;
        }

        if (y < 0) {
            y = 0;
        } else if (y > gameHeight - tankHeight) {
            y = gameHeight - tankHeight;
        }

        tank.style.left = x + 'px';
        tank.style.top = y + 'px';

        tank.style.backgroundImage = `url('./images/${tankDirection}.png')`;
    });

    document.addEventListener('contextmenu', function(event) {
        if (event.button === 2) {
            event.preventDefault();
        }
    });
});

</script>

</body>
</html>
